import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import TableTopic from './components/TableTopic';
import DetailsTopic from './components/DetailsTopic';

type DetailsType = {
  id: string;
  name: string;
  createdOrganizationName: string;
};

export default (): React.ReactNode => {
  const [visible, setVisibleState] = useState<string>('table');

  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const onDetails = (id: string, name: string, createdOrganizationName: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name, createdOrganizationName });
  };

  const onBack = () => {
    setVisibleState('table');
  };

  const container = () => {
    if (visible === 'table') {
      return <TableTopic onDetails={onDetails} />;
    } else if (visible === 'details') {
      return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
    }
  };
  return <>{container()}</>;
};
